<!-- 报名列表 -->
<template>
	<view class="applyList">

		<view class="listBox" v-for="(res,index) in listData" :key="index">
			<ListItem :data="res"></ListItem>
		</view>
		<uni-load-more  v-if="listData.length > 0" :status="loadingType"></uni-load-more>
		<noData :meStatus="true" v-if="listData.length<1"></noData>
	</view>
</template>

<script>
	// 页面组件
	import ListItem from './components/list-item.vue'

	// api请求
	import {
		applicantListApi, // 报名列表
	} from '@/api/activity.js'

	// 引入vueX
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'

	export default {
		components: {
			ListItem
		},
		data() {
			return {
				activeId: null, // 活动id
				listData: [], // 页面数据
				
				current: 1, // 当前页
				
				loadingType: 'loading', // 是否显示更多
			};
		},
		computed: {
			...mapState({
				applyItemData: state => state.dict.applyItemData
			}),
			
		},
		onLoad(props) {
			this.activeId = props.id ? Number(props.id) : null
			console.log(this.activeId, 'kkk',props);
		},

		onShow() {
			this.init();
		},

		// 触底
		onReachBottom() {
			this.current++
			this.init()
		},

		methods: {
			init() {
				// 初始化数据
				// this.setPageDataInit()
				
				this.current = 1;
				
				this.listData = [];
				
				// loading状态
				this.loadingType = 'loading'
				
				// 获取报名列表
				this.getApplicantList({
					pageNum: this.current,
					pageSize: 10
				})

			},

			/**
			 * 初始化页面数据
			 */
			setPageDataInit() {
				console.log(this.applyItemData, '看卡又淑女解码');
				this.listData = [...this.applyItemData]
			},
			
			/**
			 * 获取报名列表
			 */
			async getApplicantList(params){
				
				if(this.activeId !== null){
					params['activityId'] = this.activeId
				}
				
				const res = await applicantListApi(params)
				
				if(res.code !== 200){
					return
				}
				
				if(res.rows.length < 10){
					this.loadingType = 'noMore'
				}
				
				
				this.listData.push(...res.rows)
				
			}
			

		}
	}
</script>

<style lang="less" scoped>
	.applyList {
		#padding(24rpx 0 56rpx 0);
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;

		.listBox {
			margin: 24rpx;

			&:first-child {
				margin-top: 0;
			}

		}
	}
</style>